<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>ECharts 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vjdesign"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ejs"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vjdesign/dist/vjdesign.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      html {
        font-size: 14px;
      }

      #app {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }

      .demo-wrapper {
        position: absolute;
        top: 50px;
        bottom: 0;
        left: 0;
        right: 0;
      }

      header {
        line-height: 49px;
        border-bottom: 1px solid silver;
        padding: 0 20px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <header>
        <el-button @click="exportTemplate">导出</el-button>
      </header>
      <div class="demo-wrapper">
        <v-jdesign v-model="model" v-bind:profile="profile"></v-jdesign>
      </div>
    </div>
    <script>
      Vue.component('e-charts', {
        template: '<div ref="container" v-bind:style="styles"></div>',
        props: {
          options: Object,
          width: String,
          height: String
        },
        computed: {
          styles() {
            return {
              width: this.width || '100%',
              height: this.height || '100%'
            }
          }
        },
        data() {
          return { instance: null }
        },
        watch: {
          options: {
            deep: true,
            handler(value) {
              this.instance.setOption(value)
            }
          }
        },
        mounted() {
          this.instance = window.echarts.init(this.$refs.container)
          this.instance.setOption(this.options)
        }
      })

      new Vue({
        el: '#app',
        data() {
          return {
            model: {},
            profile: {}
          }
        },
        methods: {
          exportTemplate() {
            fetch('./template.ejs').then(response => {
              response.text().then(text => {
                saveAs(
                  new Blob(
                    [ejs.render(text, { model: JSON.stringify(this.model) })],
                    {
                      type: 'text/plain;charset=utf-8'
                    }
                  ),
                  'example.html'
                )
              })
            })
          }
        },
        async mounted() {
          const config = await fetch('value.json', { method: 'GET' })
          const profile = await fetch('profile.json', {
            method: 'GET'
          })
          this.model = await config.json()
          this.profile = await profile.json()
        }
      })
    </script>
  </body>
</html>
